<template>
  <el-row style="width: 100%" :gutter="20">
    <el-col :span="8">
      <el-card style="height: 400px;">
        <template #header>
          <div class="card-header">
            <el-icon>
              <Flag/>
            </el-icon>
            <span> 借还台</span>
          </div>
        </template>
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="70px"
            label-position="left"
            style="padding-right: 60px;"
        >
          <el-form-item label="书本条码" prop="book">
            <el-input v-model="ruleForm.book" placeholder="请输入书本条码" type="text" autocomplete="off" size="large"/>
          </el-form-item>
          <el-form-item label="借还书" prop="type">
            <el-select v-model="ruleForm.type" placeholder="请选择借阅类型" size="large">
              <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%;" size="large" type="primary" @click="submitForm(ruleFormRef)">
              提交
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%;" size="large" @click="resetForm(ruleFormRef)">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="16">
      <card-tips/>
    </el-col>
  </el-row>

  <el-divider content-position="left"></el-divider>

  <!--  搜索图书  -->
  <card-book/>
</template>

<script setup lang="ts">
import {Flag, Promotion} from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage} from "element-plus";
import api from "@/api";
import CardBook from "@/components/card/CardBook.vue"
import CardTips from "@/components/card/CardTips.vue"

const tableType = [
  {label: '书本条码',width: '120',rules: [{required: false, message: '请输入书本条码', trigger: 'blur'}],showType: '',prop: 'code'}
  , {label: '书本名称',width: '',rules: [{required: false, message: '请输入书本名称', trigger: 'blur'}],showType: '',prop: 'name'}
  , {label: '借阅用户',width: '',rules: [{required: false, message: '请输入借阅用户', trigger: 'blur'}],showType: '',prop: 'userName'}
  , {label: '借阅时间',width: '200',rules: [{required: false, message: '请输入借阅时间', trigger: 'blur'}],showType: '',prop: 'borrowDate'}
  , {label: '状态',width: '90',rules: [{required: false, message: '请输入状态', trigger: 'blur'}],showType: 'select',prop: 'unlucky'}
];

const DetailType = [
  {label: '编号', width: '', rules: [{required: false, message: '请输入编号', trigger: 'blur'}], showType: '', prop: 'id'}
  , {label: '书本条码', width: '', rules: [{required: false, message: '请输入书本条码', trigger: 'blur'}], showType: '', prop: 'code'}
  , {label: '书册编号', width: '', rules: [{required: false, message: '请输入书册编号', trigger: 'blur'}], showType: '', prop: 'booksId'}
  , {label: '书册名称', width: '', rules: [{required: false, message: '请输入书册名称', trigger: 'blur'}], showType: '', prop: 'booksName'}
  , {label: '书本名称', width: '', rules: [{required: false, message: '请输入书本名称', trigger: 'blur'}], showType: '', prop: 'name'}
  , {label: '借阅用户', width: '', rules: [{required: false, message: '请输入借阅用户', trigger: 'blur'}], showType: '', prop: 'userName'}
  , {label: '借阅时间', width: '', rules: [{required: false, message: '请输入借阅时间', trigger: 'blur'}], showType: '', prop: 'borrowDate'}
  , {label: '借阅状态', width: '', rules: [{required: false, message: '请输入借阅状态', trigger: 'blur'}], showType: 'borrow', prop: 'borrow'}
  , {label: '创建者', width: '', rules: [{required: false, message: '请输入创建者', trigger: 'blur'}], showType: '', prop: 'createBy'}
  , {label: '创建时间', width: '', rules: [{required: false, message: '请输入创建时间', trigger: 'blur'}], showType: '', prop: 'createTime'}
  , {label: '更新者', width: '', rules: [{required: false, message: '请输入更新者', trigger: 'blur'}], showType: '', prop: 'updateBy'}
  , {label: '更新时间', width: '', rules: [{required: false, message: '请输入更新时间', trigger: 'blur'}], showType: '', prop: 'updateTime'}
  , {label: '伪删除', width: '', rules: [{required: false, message: '请输入伪删除', trigger: 'blur'}], showType: 'select', prop: 'undock'}
  , {label: '状态', width: '', rules: [{required: false, message: '请输入状态', trigger: 'blur'}], showType: 'select', prop: 'unlucky'}
  , {label: '备注', width: '', rules: [{required: false, message: '请输入备注', trigger: 'blur'}], showType: 'text', prop: 'remark'}
];
//详情
const DetailVisible = ref(false);
const DetailForm = ref({});
function showDetail(index: number, row: any) {
  DetailVisible.value = true;
  DetailForm.value = row;
}

function closeVisible(formEl: FormInstance | undefined) {
  DetailVisible.value = false;
}

function onDetail() {
  DetailVisible.value = false;
}

const borrowList = ref([]);
const user = ref({});
const role = ref({});
const menu = ref([]);
onMounted(() => {
  user.value = JSON.parse(localStorage.getItem("user"));
  role.value = JSON.parse(localStorage.getItem("role"));
  menu.value = JSON.parse(localStorage.getItem("menu"));
  getMyBorrow();
})

function getMyBorrow() {
  api.bookno.findBooknoBorrow().then((res: any) => {
    borrowList.value = res.data;
  })
}

const ruleFormRef = ref<FormInstance>()
const typeList = ref(
    [{label: '借书',value: 0,}
          , {label: '还书',value: 1,},]
)
const checkBook = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入书本编号'))
  } else {
    callback()
  }
}

const checkType = (rule: any, value: any, callback: any) => {
  if (value === null) {
    return callback(new Error('请输入借阅类型'))
  }
  callback();
}

const ruleForm = reactive({
  book: '',
  type: null,
})

const rules = reactive<FormRules>({
  book: [{validator: checkBook, trigger: 'blur'}],
  type: [{validator: checkType, trigger: 'blur'}],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  //@ts-ignore
  formEl.validate((valid) => {
    if (valid) {
      api.borrow.borrowBookno(ruleForm.book, ruleForm.type).then((res: any) => {
        ElMessage({message: res.message, type: res.success ? 'success' : 'error', grouping: true, showClose: true});
        if (res.success) {
          getMyBorrow();
          formEl.resetFields();
        }
      })
    } else {
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields();
}

</script>